<template>
  <div class="Forgot">
    <div class="fan">
      <p @click="() => {
        $router.push('/login')
      }"><van-icon name="arrow-left" /></p>
    </div>
    <div class="box">
      <h2>注册</h2>
      <div class="input-box">
        <label>手机号</label>
        <input type="text" v-model="accner" placeholder="请输入您的手机号"/>
      </div>
      <div class="input-box input-box1">
        <input type="text" v-model="codeyan" />
        <button @click="getcode()" :disabled="countdown > 0">{{ buttonText }}</button>
      </div>
      <div class="input-box">
        <label>设置您的密码</label>
        <input type="password" v-model="password" />
      </div>
      <div class="btn-box">
        <div>
          <button @click="register()">下一步</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import './style.css'
import axios from 'axios';
import router from '../../router';
let accner = ref('')
let password = ref('')
let codeyan = ref('')
let rightcode = ref('')

const countdown = ref(0); // 倒计时
const buttonText = ref('发送验证码'); // 按钮
//按钮倒计时
const countdownTimer = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    buttonText.value = `${countdown.value}秒后重试`;
    if (countdown.value <= 0) {
      clearInterval(timer);
      buttonText.value = '发送验证码';
    }
  }, 1000);
};

//默认头像
//https://image.baidu.com/search/detail?ct=503316480&z=0&tn=baiduimagedetail&ipn=d&word=%E7%A5%9E%E7%A7%98%E7%9B%92%E5%AD%90&step_word=&lid=8597805188639754547&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=&copyright=&cs=565145826,1134408854&os=414846836,3961975609&simid=565145826,1134408854&pn=0&rn=1&di=7375936315981824001&ln=1344&fr=&fmq=1721905235038_R&ic=0&s=undefined&se=&sme=&tab=0&width=0&height=0&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fgd-hbimg.huaban.com%2Fe9c8249a2561e0fbbd29293b96caba87565c548c3c9d-7LoYb1_fw658&rpstart=0&rpnum=0&adpicid=0&nojc=undefined

const getcode = async () => {
  let regPhone = /^1[3-9]\d{9}$/
  if (regPhone.test(accner.value)) {
    countdownTimer()
    let { data } = await axios.get("mxx/Test/MobileCodeNumber", { params: { phone: accner.value } })
    if (data.code === 200) {
      rightcode.value = data.rightcode
      showToast({
        message: data.msg,
        icon: 'success',
      });
    } else {
      showToast({
        message: data.msg,
        icon: 'fail',
      });
    }
  } else {
    showToast({
      message: '请输入正确的手机号',
      icon: 'fail',
    });
  }
}

const register = async () => {
  if (accner.value === "" || codeyan.value === "") {
    showToast({
      message: '手机号不能为空',
      icon: 'fail',
    });
  } else {
    if (codeyan.value === rightcode.value) {
      let obj = {
        username: "用户" + accner.value.slice(-4),
        password: password.value,
        img:"https://gd-hbimg.huaban.com/e9c8249a2561e0fbbd29293b96caba87565c548c3c9d-7LoYb1_fw658",
        tel: accner.value,
        name:'',
        sex: "男",
        Idnumber:'28282828282828282828',
        birthday:'',
        imgflag:'',
        email:'',
      }
      let { data } = await axios.post("mxx/register", obj)
      if (data.code === 200) {
        showToast({
          message: data.msg,
          icon: 'success',
        })
          router.push("/login")
      } else {
        showToast({
          message: data.msg,
          icon: 'fail',
        })
      }
    } else {
      showToast({
          message: '验证码错误',
          icon: 'fail',
        })
    }
  }
}
</script>

<style lang="less" scoped></style>